<template>
  <div class="address">
    <van-nav-bar
      fixed
      title="收货地址"
      left-arrow
      @click-left="$router.go(-1)"
    />
    <div class="addresslist" v-if="addressList.length > 0">
      <van-address-list
        v-model="chosenAddressId"
        :list="addressList"
        default-tag-text="默认"
        @add="onAdd"
        @edit="onEdit"
        @select="select"
      />
    </div>
  </div>
</template>

<script>
import { getAddressList } from "@/api/address";
export default {
  name: "Address",
  data() {
    return { chosenAddressId: "", addressList: [] };
  },
  async created() {
    this.getAddressList();
  },
  computed: {
    selectAddress() {
      return this.addressList[0];
    },
  },
  methods: {
    async getAddressList() {
      const {
        data: { list },
      } = await getAddressList();
      if (list) {
        list.forEach((item) => {
          item["id"] = item.address_id;
          item["tel"] = item.phone;
          item["address"] =
            item.region.province +
            item.region.city +
            item.region.region +
            item.detail;
        });
      }
      this.addressList = list;
    },
    //新增
    onAdd() {
      this.$router.push({ path: "/editaddress" });
    },
    //编辑
    onEdit(item) {
      this.$router.push({
        path: "/editaddress",
        query: {
          id: item.address_id,
        },
      });
    },
    //选择
    select(item) {
      console.info(item);
      if (this.id) {
        setStore({ name: "address_pay", content: item });
        this.$router.go(-1);
      }
    },
  },
};
</script>



<style lang="less" scoped>
.address {
  height: 100%;
}
.addresslist {
  margin-top: 50px;
}
</style>
